<template>
	<view>
		<view class="list-wrap">
			<view class="list-c">
				<view class="wrap" v-for="(item,i) in list" :key="i">
					<view class="imglist">
						<view class="img-w" v-for="(p,j) in item.picList" :key="j" >
							<vs-ratio-view ratio="1/1">
								<image :src="p.imgUrl" class="imgFull"></image>
							</vs-ratio-view>
							<view class="mask coverFull" v-if="j===3" @click="$Router.push({name:'children'})">
								<view style="margin: 0 auto;display: flex;flex-direction: column;align-items: center;justify-content: center;">
									<vs-img-icon url="/static/img/common_review_send.png"></vs-img-icon>
									<text style="font-size: 12px; color: #fff;margin-top: 5px;">查看更多</text>
								</view>
							</view>
						</view>
					</view>
					<view class="desc">{{item.name}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {getImgList} from '@/api/homeapi'
	export default{
		data(){
			return{
				listQuery:{
					page:1,
					rows:9999
				},
				list:[]
				
			}
		},
		mounted() {
			getImgList(this.listQuery).then(res=>{
				// console.log(res);
				res.data.forEach(v=>{
					if(v.picList.length>0){
						v.picList.forEach(p=>{
							p.imgUrl = this.$Store.baseUrl + p.imgUrl
						})
					}
				})
				this.list = res.data
			})
	
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrap{
		
		.list-c{
			width: 100%;
			background-color: #fff;
			.wrap{
				width: 90%;
				margin: 0 auto;
				border-bottom: 1px solid #ccc;
				padding-top: 20px;
				
				.imglist{
					display: flex;
					
					.img-w{
						flex: 1;
						margin-right: 5px;
						position: relative;
						
						
						.mask{
							position: absolute;
							top: 0;
							left: 0;
							z-index: 10;
							background: rgba(0,0,0,.3);
							display: flex;
							justify-content: center;
							
						}
					}
					.r0{
						margin-right: 0px;
					}
					
				}
				.desc{
					padding: 10px 0;
					font-size: 14px;
				}
				
				
			}
			
		}
		
	}
</style>
